<h2>
    1 搜索页 </h2>
<div class="codeView bs-docs-example ">

    <div class="row ">
        <div class="col-sm-12 ">
            <ul id="myTab1" class="nav nav-tabs bordered ">
                <li class="active">
                    <a href="#s1" data-toggle="tab">
                        搜索全部 <i class="fa fa-caret-down"></i>
                    </a>
                </li>
                <li>
                    <a href="#s2" data-toggle="tab">
                        搜索用户 </a>
                </li>
                <li>
                    <a href="#s3" data-toggle="tab">
                        搜索历史 </a>
                </li>
                <li class="pull-right hidden-mobile">
                    <a href="javascript:void(0);" data-toggle="tab">
			          <span class="note">
          	大约 24,431 条搜索结果 (搜索时间：0.15 秒)          </span>
                    </a>
                </li>
                <div class="clearfix ">
                </div>
            </ul>
            <div id="myTabContent1" class="tab-content bg-color-white padding-10 ">
                <div class="tab-pane fade in active" id="s1">
                    <h1>
                        查询 <span class="semi-bold">			全部		</span>
                    </h1>
                    <br>

                    <div class="input-group input-group-lg hidden-mobile">
                        <div class="input-group-btn">
                            <button type="button" class="btn btn-default dropdown-toggle " data-toggle="dropdown">
                                全部 <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu ">
                                <li class="active"><a href="javascript:void(0)"><i class="fa fa-check"></i> 全部</a></li>
                                <li class="divider"></li>
                                <li><a href="javascript:void(0)">用户</a></li>
                                <li><a href="javascript:void(0)">项目</a></li>
                                <li><a href="javascript:void(0)">网站</a></li>
                            </ul>
                        </div>
                        <input class="form-control input-lg " type="text" placeholder="重新搜索..." id="search-project" value="">

                        <div class="input-group-btn">
                            <button type="submit" class="btn btn-default ">
                                &nbsp;&nbsp;&nbsp;<i class="fa fa-fw fa-search fa-lg "></i>&nbsp;&nbsp;&nbsp;
                            </button>
                        </div>
                    </div>
                    <h1 class="font-md">搜索结果 <span class="semi-bold">Tiny</span>
                        <small class="text-danger"> &nbsp;&nbsp;的搜索结果</small>
                    </h1>
                    <div class="search-results clearfix smart-form ">
                        <h4><i class="fa fa-plus-square txt-color-blue "></i>&nbsp;<a href="javascript:void(0);">Tiny分布式计算框架 </a></h4>

                        <div>
                            <div class="rating display-inline ">
                                <input type="radio" name="stars-rating"" id="stars-rating-1">
                                <label for="stars-rating-1"><i class="fa fa-star "></i></label>
                                <input type="radio" name="stars-rating"" id="stars-rating-2">
                                <label for="stars-rating-2"><i class="fa fa-star "></i></label>
                                <input type="radio" name="stars-rating"" id="stars-rating-3">
                                <label for="stars-rating-3"><i class="fa fa-star "></i></label>
                                <input type="radio" name="stars-rating"" id="stars-rating-4">
                                <label for="stars-rating-4"><i class="fa fa-star "></i></label>
                                <input type="radio" name="stars-rating"" id="stars-rating-5">
                                <label for="stars-rating-5"><i class="fa fa-star "></i></label>
                            </div>
                            <br>

                            <div class="url text-success ">
                                http://www.oschina.net/p/tiny <i class="fa fa-caret-down"></i>
                            </div>
                            <p class="description"> 其于职业介绍所、工头、工人、工作模型的分布式计算框架。
                                职业介绍所有两种，一种是本地职业介绍所，一种是远程职业介绍所。顾名思义，本地职业介绍所就是在当前计算机上的，远程职业介绍所用于连接到远程职业介...
                            </p>
                        </div>
                    </div>
                    <div class="search-results clearfix ">
                        <h4>&nbsp;<a href="javascript:void(0);">Tiny模板引擎 TinyTemplate</a></h4>

                        <div><p class="note">
                            <a href="javascript:void(0);">
                                <i class="fa fa-thumbs-up "></i> 喜欢该链接 &nbsp;&nbsp;</a>
                            <a href="javascript:void(0);">
                                <i class="fa fa-chain "></i> 分享该链接 &nbsp;&nbsp;</a>
                            <a href="javascript:void(0);">
                                <i class="fa fa-star txt-color-yellow"></i> 收藏&nbsp</a>
                        </p>

                            <div class="url text-success ">
                                http://www.oschina.net/p/tinytemplate <i class="fa fa-caret-down"></i>
                            </div>
                            <p class="description"> Tiny模板引擎 是一个基于Java技术构建的模板引擎，它具有体量小、性能高和扩展易的特点。
                                适合于所有通过文本模板生成文本类型内容的场景，如：XML、源文件、HTML等等，可以说，它的出现...
                            </p>
                        </div>
                    </div>
                    <div class="search-results clearfix ">
                        <h4><a href="javascript:void(0);">Tiny的MDA模型定义及扩展 </a>&nbsp;&nbsp;<a href="javascript:void(0);"><i
                                class="fa fa-caret-up fa-lg "></i></a></h4>
                        <img src="/static/img/sample.jpg">

                        <div><p class="note">
                            <a href="javascript:void(0);">
                                <i class="fa fa-thumbs-up "></i> 喜欢该链接 &nbsp;&nbsp;</a>
                            <a href="javascript:void(0);">
                                <i class="fa fa-chain "></i> 分享该链接 &nbsp;&nbsp;</a>
                            <a href="javascript:void(0);">
                                <i class="fa fa-star txt-color-yellow"></i> 收藏&nbsp</a>
                        </p>

                            <div class="url text-success ">
                                http://web.tinygroup.org <i class="fa fa-caret-down"></i>
                            </div>
                            <p class="description"> Tiny模板引擎 是一个XXX的出现...
                                <br>
                                <a href="javascript:void(0)" class="btn btn-default btn-xs ">跳转到gallery</a>
                            </p>
                        </div>
                    </div>
                    <div class="text-center">
                        <hr>
                        <ul class="pagination no-margin">
                            <li class="prev ">
                                <a href="javascript:void(0);"> 上一页 </a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">15</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">16</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">17</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">18</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">19</a>
                            </li>
                            <li class="active ">
                                <a href="javascript:void(0);">20</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">21</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">22</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">23</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">24</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">25</a>
                            </li>
                            <li class="next ">
                                <a href="javascript:void(0);"> 下一页 </a>
                            </li>
                        </ul>
                        <br>
                        <br>
                        <br>
                    </div>
                </div>
                <div class="tab-pane fade " id="s2">
                    <h1>
                        搜索 <span class="semi-bold">			用户		</span>
                    </h1>

                    <div class="input-group input-group-lg ">
                        <input class="form-control input-lg " type="text" placeholder="重新搜索..." id="search-user" value="">

                        <div class="input-group-btn">
                            <button type="submit" class="btn btn-default ">
                                &nbsp;&nbsp;&nbsp;<i class="fa fa-fw fa-search fa-lg "></i>&nbsp;&nbsp;&nbsp;
                            </button>
                        </div>
                    </div>
                    <h1 class="font-md"> 搜索结果&nbsp;<span class="semi-bold">用户</span>
                        <small class="text-danger"> &nbsp;&nbsp; &nbsp;&nbsp;(181条)</small>
                    </h1>
                    <br>

                    <div class="table-responsive ">
                        <table id="resultTable" class="table table-striped table-bordered table-hover ">
                            <thead>
                            <tr>
                                <th style="width:42px">头像</th>
                                <th>姓</th>
                                <th>名</th>
                                <th>出生日期</th>
                                <th>邮箱 / 用户名</th>
                                <th>城市</th>
                                <th>邮编</th>
                                <th>电话</th>
                                <th>状态</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr class="">
                                <td><img src='/static/img/male.png' alt="" width="20"></td>
                                <td>Noble</td>
                                <td>Saunders</td>
                                <td>2002-12-07</td>
                                <td>numbers@lipliquid.com <a href="javascript:void(0);" class="pull-right"><i
                                        class="fa fa-key"></i></a></td>
                                <td>La Puerta</td>
                                <td>54076</td>
                                <td>558-908-4575</td>
                                <td><span class="label label-success">活跃的</span></td>
                            </tr>
                            <tr class="">
                                <td><img src='/static/img/male.png' alt="" width="20"></td>
                                <td>Anna</td>
                                <td>Meeks</td>
                                <td>2007-04-05</td>
                                <td>carmel@forkform.me <a href="javascript:void(0);" class="pull-right"><i class="fa fa-key"></i></a>
                                </td>
                                <td>Holland</td>
                                <td>73490</td>
                                <td>255-757-8495</td>
                                <td><span class="label label-success">活跃的</span></td>
                            </tr>
                            <tr class="">
                                <td><img src='/static/img/male.png' alt="" width="20"></td>
                                <td>Millicent</td>
                                <td>Decker</td>
                                <td>2007-03-27</td>
                                <td>agustin.murray@babyback.me <a href="javascript:void(0);" class="pull-right"><i
                                        class="fa fa-key"></i></a></td>
                                <td>Leona</td>
                                <td>45960</td>
                                <td>207-445-7704</td>
                                <td><span class="label label-success">活跃的</span></td>
                            </tr>
                            <tr class="">
                                <td><img src='/static/img/male.png' alt="" width="20"></td>
                                <td>Misty</td>
                                <td>Mcdowell</td>
                                <td>2002-12-09</td>
                                <td>mona.doreen@processproduce.edu <a href="javascript:void(0);" class="pull-right"><i
                                        class="fa fa-key"></i></a></td>
                                <td>Sweetwater</td>
                                <td>94133</td>
                                <td>707-118-9601</td>
                                <td><span class="label label-success">活跃的</span></td>
                            </tr>
                            <tr class="danger">
                                <td><img src='/static/img/male.png' alt="" width="20"></td>
                                <td>Cleo</td>
                                <td>Blue</td>
                                <td>1993-04-30</td>
                                <td>collin@berry.info <a href="javascript:void(0);" class="pull-right"><i class="fa fa-key"></i></a>
                                </td>
                                <td>Groesbeck</td>
                                <td>12764</td>
                                <td>543-827-8732</td>
                                <td><span class="label label-danger">禁用</span></td>
                            </tr>
                            <tr class="">
                                <td><img src='/static/img/male.png' alt="" width="20"></td>
                                <td>Eliza</td>
                                <td>Proctor</td>
                                <td>2003-12-26</td>
                                <td>lawanda@event.me <a href="javascript:void(0);" class="pull-right"><i class="fa fa-key"></i></a>
                                </td>
                                <td>Alto</td>
                                <td>70454</td>
                                <td>453-985-9884</td>
                                <td><span class="label label-success">活跃的</span></td>
                            </tr>
                            <tr class="success">
                                <td><img src='/static/img/male.png' alt="" width="20"></td>
                                <td>Chantel</td>
                                <td>Medina</td>
                                <td>1993-04-01</td>
                                <td>marilynn.lucretia@animalanswer.edu <a href="javascript:void(0);" class="pull-right"><i
                                        class="fa fa-key"></i></a></td>
                                <td>Lozano</td>
                                <td>46151</td>
                                <td>789-917-1518</td>
                                <td><span class="label label-primary">管理</span></td>
                            </tr>
                            <tr class="">
                                <td><img src='/static/img/male.png' alt="" width="20"></td>
                                <td>Tisha</td>
                                <td>Burns</td>
                                <td>1997-10-23</td>
                                <td>luella@square.me <a href="javascript:void(0);" class="pull-right"><i class="fa fa-key"></i></a>
                                </td>
                                <td>Dayton</td>
                                <td>18943</td>
                                <td>510-644-1193</td>
                                <td><span class="label label-success">活跃的</span></td>
                            </tr>
                            </tbody>
                        </table>

                    </div>
                    <div class="text-center">
                        <hr>
                        <ul class="pagination no-margin">
                            <li class="prev disabled">
                                <a href="javascript:void(0);"> 上一页 </a>
                            </li>
                            <li class="active ">
                                <a href="javascript:void(0);">1</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">2</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">3</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">4</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">5</a>
                            </li>
                            <li class="next ">
                                <a href="javascript:void(0);"> 下一页 </a>
                            </li>
                        </ul>
                        <br>
                        <br>
                        <br>
                    </div>
                </div>
                <div class="tab-pane fade " id="s3">
                    <h1>
                        搜索 <span class="semi-bold">			历史		</span>
                    </h1>

                    <p class="alert alert-info ">您的搜索历史功能已被关闭.</p>
                    <span class="onoffswitch-title ">自动保存搜索历史</span>
                            <span class="onoffswitch ">        <input type="checkbox" name="save_history" class="onoffswitch-checkbox "
                                                                      id="save_history" checked="checked">
        <label class="onoffswitch-label " for="save_history"> <span class="onoffswitch-inner" data-swchon-text="ON"
                                                                    data-swchoff-text="OFF"></span>
            <span class="onoffswitch-switch "></span>
        </label>
    </span>
                </div>
            </div>
        </div>
    </div>


    <!-- end row -->
</div>
<h3>
    组件包 </h3>
<pre class="prettyprint linenums"><span class="Huialert-danger">1 搜索页依赖org.tinygroup.searchPage包</span></pre>
